﻿<Page
    x:Class="App20.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App20"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Black">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FaceStateGroups">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5">
                        <VisualTransition.GeneratedEasingFunction>
                            <BackEase Amplitude="2" EasingMode="EaseInOut" />
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="MouseClosedState">
                    <Storyboard>
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.Opacity)"
                                        To="0"
                                        d:IsOptimized="True" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouthOpenedState">
                    <Storyboard>
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceClosed"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                        To="1"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceClosed"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                        To="1"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
                                        To="0"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"
                                        To="0"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"
                                        To="0"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                        To="1"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                        To="1"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceOpen"
                                        Storyboard.TargetProperty="(UIElement.Opacity)"
                                        To="1"
                                        d:IsOptimized="True" />
                        <DoubleAnimation Duration="0"
                                        Storyboard.TargetName="FaceClosed"
                                        Storyboard.TargetProperty="(UIElement.Opacity)"
                                        To="0"
                                        d:IsOptimized="True" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior x:Name="WhenPointerEntered" EventName="PointerEntered">
                    <Core:GoToStateAction StateName="MouthOpenedState" />
                </Core:EventTriggerBehavior>
                <Core:EventTriggerBehavior x:Name="WhenPointerExited" EventName="PointerExited">
                    <Core:GoToStateAction StateName="MouseClosedState" />
                </Core:EventTriggerBehavior>
                <Core:EventTriggerBehavior x:Name="WhenLoaded">
                    <Core:GoToStateAction StateName="MouseClosedState" />
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                x:Name="FaceClosed"
                Canvas.Left="0"
                Canvas.Top="0"
                Width="500"
                Height="500"
                RenderTransformOrigin="0.5,0.5">
                <Canvas.RenderTransform>
                    <CompositeTransform ScaleX="0.5" ScaleY="0.75" />
                </Canvas.RenderTransform>
                <Canvas.Projection>
                    <PlaneProjection RotationX="-14.589"
                                    RotationY="37.587"
                                    RotationZ="-9.322" />
                </Canvas.Projection>
                <Viewbox Canvas.Left="25.3336"
                        Canvas.Top="45.8285"
                        Width="459.334"
                        Height="413.67">
                    <Canvas Width="459.334" Height="413.67">
                        <Path Canvas.Left="1.90735e-006"
                            Canvas.Top="-6.10352e-005"
                            Width="459.334"
                            Height="413.67"
                            Data="F1 M 20,-6.10352e-005L 439.334,-6.10352e-005C 450.38,-6.10352e-005 459.334,8.95425 459.334,19.9999L 459.334,393.67C 459.334,404.716 450.38,413.67 439.334,413.67L 20,413.67C 8.9543,413.67 1.90735e-006,404.716 1.90735e-006,393.67L 1.90735e-006,19.9999C 1.90735e-006,8.95425 8.9543,-6.10352e-005 20,-6.10352e-005 Z "
                            Stretch="Fill">
                            <Path.Fill>
                                <LinearGradientBrush StartPoint="0.122644,-0.025598" EndPoint="1.41672,-0.025598">
                                    <LinearGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <SkewTransform AngleX="25.8432" AngleY="0" CenterX="0.122644" CenterY="-0.025598" />
                                            <RotateTransform Angle="54.3239" CenterX="0.122644" CenterY="-0.025598" />
                                        </TransformGroup>
                                    </LinearGradientBrush.RelativeTransform>
                                    <GradientStop Offset="0" Color="#FFE7E7E7" />
                                    <GradientStop Offset="1" Color="#FF313131" />
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path Canvas.Left="44.1664"
                            Canvas.Top="110.449"
                            Width="141"
                            Height="115.924"
                            Data="F1 M 182.666,113.307C 182.666,234.792 114.666,223.172 114.666,223.172C 114.666,223.172 46.6664,239.649 46.6664,112.949L 182.666,113.307 Z "
                            Fill="#FF1F3034"
                            Stretch="Fill"
                            StrokeLineJoin="Round"
                            StrokeThickness="5">
                            <Path.Stroke>
                                <LinearGradientBrush StartPoint="5.41092e-008,0.385789" EndPoint="1,0.385789">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Path.Stroke>
                        </Path>
                        <Path Canvas.Left="278.993"
                            Canvas.Top="110.449"
                            Width="141"
                            Height="115.924"
                            Data="F1 M 417.493,113.307C 417.493,234.792 349.493,223.172 349.493,223.172C 349.493,223.172 281.493,239.649 281.493,112.949L 417.493,113.307 Z "
                            Fill="#FF1F3034"
                            Stretch="Fill"
                            StrokeLineJoin="Round"
                            StrokeThickness="5">
                            <Path.Stroke>
                                <LinearGradientBrush StartPoint="0,0.385789" EndPoint="1,0.385789">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Path.Stroke>
                        </Path>
                        <Rectangle Canvas.Left="137.666"
                                Canvas.Top="266.347"
                                Width="186.333"
                                Height="59"
                                Fill="#FF1F3034"
                                Stretch="Fill"
                                StrokeLineJoin="Round"
                                StrokeThickness="5">
                            <Rectangle.Stroke>
                                <LinearGradientBrush StartPoint="0.013417,0.499999" EndPoint="0.986583,0.499999">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                        </Rectangle>
                        <Path Canvas.Left="48.6778"
                            Canvas.Top="115.621"
                            Width="79.4886"
                            Height="70.0503"
                            Data="F1 M 128.166,142.338C 128.166,132.34 124.781,123.133 119.093,115.801L 50.7136,115.621C 49.9985,116.533 49.3192,117.474 48.6778,118.443C 48.8652,141.487 51.345,159.672 55.2562,174.008C 62.9999,181.243 73.3994,185.672 84.8331,185.672C 108.765,185.672 128.166,166.271 128.166,142.338 Z "
                            Fill="#FF00BAEA"
                            Stretch="Fill"
                            Stroke="#FF00BAEA"
                            StrokeLineJoin="Round"
                            StrokeThickness="1" />
                        <Path Canvas.Left="282.679"
                            Canvas.Top="115.621"
                            Width="79.4886"
                            Height="70.0503"
                            Data="F1 M 362.167,142.338C 362.167,132.34 358.781,123.133 353.094,115.801L 284.714,115.621C 283.999,116.533 283.32,117.475 282.679,118.443C 282.866,141.487 285.346,159.672 289.257,174.008C 297.001,181.243 307.4,185.672 318.834,185.672C 342.766,185.672 362.167,166.271 362.167,142.338 Z "
                            Fill="#FF00BAEA"
                            Stretch="Fill"
                            Stroke="#FF00BAEA"
                            StrokeLineJoin="Round"
                            StrokeThickness="1" />
                    </Canvas>
                </Viewbox>
            </Canvas>

            <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                x:Name="FaceOpen"
                Canvas.Left="0"
                Canvas.Top="0"
                Width="500"
                Height="500"
                d:IsHidden="True">
                <Canvas.RenderTransform>
                    <CompositeTransform ScaleX="0.5" ScaleY="0.75" />
                </Canvas.RenderTransform>
                <Canvas.Projection>
                    <PlaneProjection RotationX="-14.589"
                                    RotationY="37.587"
                                    RotationZ="-9.322" />
                </Canvas.Projection>
                <Viewbox Canvas.Left="23.5057"
                        Canvas.Top="75.6666"
                        Width="459.333"
                        Height="330">
                    <Canvas Width="459.333" Height="330">
                        <Path Canvas.Left="0"
                            Canvas.Top="0"
                            Width="459.333"
                            Height="330"
                            Data="F1 M 20,0L 439.333,0C 450.379,0 459.333,8.95428 459.333,20L 459.333,310C 459.333,321.046 450.379,330 439.333,330L 20,330C 8.9543,330 0,321.046 0,310L 0,20C 0,8.95428 8.9543,0 20,0 Z "
                            Stretch="Fill">
                            <Path.Fill>
                                <LinearGradientBrush StartPoint="0.122645,-0.0256099" EndPoint="1.41673,-0.0256099">
                                    <LinearGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <SkewTransform AngleX="25.8435" AngleY="0" CenterX="0.122645" CenterY="-0.0256099" />
                                            <RotateTransform Angle="54.324" CenterX="0.122645" CenterY="-0.0256099" />
                                        </TransformGroup>
                                    </LinearGradientBrush.RelativeTransform>
                                    <GradientStop Offset="0" Color="#FFE7E7E7" />
                                    <GradientStop Offset="1" Color="#FF313131" />
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Ellipse Canvas.Left="44.1666"
                                Canvas.Top="42.8334"
                                Width="141"
                                Height="141"
                                Fill="#FF1F3034"
                                Stretch="Fill"
                                StrokeLineJoin="Round"
                                StrokeThickness="5">
                            <Ellipse.Stroke>
                                <LinearGradientBrush StartPoint="-6.76365e-008,0.5" EndPoint="1,0.5">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                        </Ellipse>
                        <Ellipse Canvas.Left="276.354"
                                Canvas.Top="42.8335"
                                Width="141"
                                Height="141"
                                Fill="#FF1F3034"
                                Stretch="Fill"
                                StrokeLineJoin="Round"
                                StrokeThickness="5">
                            <Ellipse.Stroke>
                                <LinearGradientBrush StartPoint="-2.84073e-007,0.5" EndPoint="1,0.5">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                        </Ellipse>
                        <Ellipse Canvas.Left="155.875"
                                Canvas.Top="176.167"
                                Width="159.292"
                                Height="127"
                                Fill="#FF1F3034"
                                Stretch="Fill"
                                StrokeLineJoin="Round"
                                StrokeThickness="5">
                            <Ellipse.Stroke>
                                <LinearGradientBrush StartPoint="0.00301929,0.5" EndPoint="0.996981,0.5">
                                    <GradientStop Offset="0" Color="#FF545454" />
                                    <GradientStop Offset="1" Color="#FF9A9A9A" />
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                        </Ellipse>
                        <Path Canvas.Left="189.968"
                            Canvas.Top="247.534"
                            Width="91.8213"
                            Height="50.9007"
                            Data="F1 M 235.252,298.435C 252.731,298.435 268.853,293.838 281.789,286.09C 279.863,264.504 260.057,247.534 235.908,247.534C 211.485,247.534 191.505,264.891 189.968,286.826C 202.685,294.128 218.332,298.435 235.252,298.435 Z "
                            Stretch="Fill">
                            <Path.Fill>
                                <LinearGradientBrush StartPoint="0.5,-0.853476" EndPoint="0.5,1.85348">
                                    <GradientStop Offset="0" Color="#FF2D2D2D" />
                                    <GradientStop Offset="1" Color="#FFE7E7E7" />
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path Canvas.Left="117.033"
                            Canvas.Top="71.1578"
                            Width="227.333"
                            Height="79.2929"
                            Data="M 179.868,113.15C 179.868,97.4722 174.249,83.0336 164.809,71.5317C 162.916,71.2852 160.984,71.1578 159.019,71.1578C 135.831,71.1578 117.033,88.9081 117.033,110.804C 117.033,132.7 135.831,150.451 159.019,150.451C 162.392,150.451 165.673,150.075 168.816,149.366C 175.817,138.88 179.868,126.462 179.868,113.15 Z M 281.731,113.15C 281.731,126.484 285.795,138.921 292.817,149.418C 295.889,150.093 299.091,150.451 302.381,150.451C 325.569,150.451 344.367,132.7 344.367,110.804C 344.367,88.9081 325.569,71.1578 302.381,71.1578C 300.493,71.1578 298.634,71.2755 296.813,71.5034C 287.359,83.0099 281.731,97.4594 281.731,113.15 Z "
                            Fill="#FF00BAEA"
                            Stretch="Fill" />
                    </Canvas>
                </Viewbox>
            </Canvas>

        </Grid>
    </Grid>
</Page>
